import * as c from '@/services/consts';
import { ArrowDownOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
  ProFormSwitch,
} from '@ant-design/pro-form';
import { Col, Row, TreeSelect } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';

type VpnServerFormProps = {
  visible: boolean;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel } = props;
  // console.log(current);

  if (!visible) {
    return null;
  }

  // const [selectIds, setSelectIds] = useState<any[]>([]);
  const [groupIds, setGroupIds] = useState<string[] | undefined>(undefined);
  const [memberLevel, setMemberLevel] = useState<number | undefined>(undefined);
  const [serverOnline, setServerOnline] = useState<number | undefined>(
    undefined,
  );
  const [serverStatus, setServerStatus] = useState<number | undefined>(
    undefined,
  );
  const [serverBlock, setServerBlock] = useState<number | undefined>(undefined);
  const [exportNetConfig, setExportNetConfig] = useState<boolean>(false);
  const [downloadUrl, setDownloadUrl] = useState<string | undefined>(undefined);
  const [unrelay, setUnrelay] = useState<boolean>(false);
  const [undisable, setUndisable] = useState<boolean>(false);
  const [supplierIds, setSupplierIds] = useState<number[] | undefined>(undefined);

  const formRef = useRef<ProFormInstance>();

  const { getVpnGroupExTrees, supplierOptions } = useModel('useGlobalModel', (model) => ({
    getVpnGroupExTrees: model.getVpnGroupExTrees,
    supplierOptions: model.supplierOptions,
  }));

  useEffect(() => {
    let url = '/admin-api/vpnserver/exportip?a=1';
    if (groupIds && groupIds.length > 0) {
      for (let g of groupIds) {
        url += `&groupIds=${g}`;
      }
    }
    if (supplierIds && supplierIds.length > 0) {
      for (let g of supplierIds) {
        url += `&supplierIds=${g}`;
      }
    }
    if (memberLevel) {
      url += `&groupmemberlevel=${memberLevel}`;
    }
    if (serverOnline == 1 || serverOnline == 0) {
      url += `&serveronline=${serverOnline == 1 ? true : false}`;
    }
    if (serverStatus == 1 || serverStatus == 0) {
      url += `&serverstatus=${serverStatus == 1 ? true : false}`;
    }
    if (serverBlock == 1 || serverBlock == 0) {
      url += `&serverblock=${serverBlock == 1 ? true : false}`;
    }

    url += `&exportnetconfig=${exportNetConfig}&unrelay=${unrelay}&undisable=${undisable}`;

    // console.log(url);

    setDownloadUrl(url);
  }, [
    groupIds,
    memberLevel,
    serverOnline,
    serverStatus,
    serverBlock,
    exportNetConfig,
    unrelay,
    undisable,
    supplierIds,
  ]);

  return (
    <DrawerForm<API.VpnServer>
      open={visible}
      title="导出IP"
      formRef={formRef}
      autoFocusFirstInput
      width={800}
      drawerProps={{
        onClose: onCancel,
        maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          分组
          <TreeSelect
            style={{ minWidth: '100%', marginTop: 10, marginBottom: 30 }}
            listHeight={900}
            // maxTagCount={1}
            dropdownMatchSelectWidth={false}
            placeholder="选择分组过滤"
            allowClear={true}
            showSearch={true}
            treeCheckable={true}
            // multiple={false}
            treeDefaultExpandAll
            treeData={getVpnGroupExTrees(undefined, true)}
            value={groupIds}
            treeNodeFilterProp="title"
            onChange={(value) => {
              setGroupIds(value ? value : undefined);
            }}
            // filterTreeNode={(input, option) =>
            //   option && option.title ? option.title.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 : false
            // }
          />
        </Col>
        <Col span={24}>
          <ProFormSelect
            name="supplierIds"
            label="服务器供应商"
            placeholder="请选择服务器供应商"
            allowClear={true}
            options={supplierOptions}
            mode='multiple'
            fieldProps={{
              showArrow: true,
              showSearch: true,
              onChange: (value, option) => {
                setSupplierIds(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSelect
            name="memberLevel"
            label="用户等级"
            options={c.MemberLevelOptions}
            fieldProps={{
              onChange: (value, option) => {
                // console.log(value,option);
                setMemberLevel(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSelect
            name="serverStatus"
            label="服务器状态"
            allowClear={true}
            options={[
              { label: '正常', value: 1 },
              { label: '禁用', value: 0 },
            ]}
            fieldProps={{
              onChange: (value, option) => {
                // console.log(value,option);
                setServerStatus(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSelect
            name="serverOnline"
            label="服务器在线"
            allowClear={true}
            options={[
              { label: '在线', value: 1 },
              { label: '离线', value: 0 },
            ]}
            fieldProps={{
              onChange: (value, option) => {
                // console.log(value,option);
                setServerOnline(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSelect
            name="serverBlock"
            label="服务器被墙"
            allowClear={true}
            options={[
              { label: '正常', value: 1 },
              { label: '被墙', value: 0 },
            ]}
            fieldProps={{
              onChange: (value, option) => {
                // console.log(value,option);
                setServerBlock(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name="exportNetConfig"
            label="导出网络配置"
            initialValue={exportNetConfig}
            fieldProps={{
              defaultChecked: exportNetConfig,
              onChange: (value, option) => {
                console.log(value, option);
                setExportNetConfig(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name="unrelay"
            label="不导出口IP"
            initialValue={unrelay}
            fieldProps={{
              defaultChecked: unrelay,
              onChange: (value, option) => {
                setUnrelay(value);
              },
            }}
          />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name="undisable"
            label="不导禁用IP"
            initialValue={undisable}
            fieldProps={{
              defaultChecked: undisable,
              onChange: (value, option) => {
                setUndisable(value);
              },
            }}
          />
        </Col>
        <Col span={18}></Col>
        <Col span={24}>
          <a target="_blank" key="excel" href={downloadUrl}>
            <ArrowDownOutlined />
            开始导出Excel
          </a>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
